let path = require('path');
let HtmlWebpackPlugin = require("html-webpack-plugin");
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
let OptimizeCss = require('optimize-css-assets-webpack-plugin');
let UglifyjsPlugin = require('uglifyjs-webpack-plugin');
let CopyPlugin = require('copy-webpack-plugin');

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;



let postCss = require('autoprefixer')({
  "overrideBrowserslist": [
    'last 10 Chrome versions',
    'last 5 Firefox versions',
    'Safari >= 6',
    'ie> 8'
  ]
})

//console.log(path.resolve('dist'));
module.exports = {
  mode: "development",
  entry: {
    'index': './src/app.js',
    'admin': './src/admin.js'
  },//入口
  output: {
    filename: "[name].js",//如果是多页面应用不能写死需要用到[name]自动获取入口的home和admin
    path: path.resolve('dist')//路径必须是一个绝对路径
    // publicPath: "/"  //build之后的公共路径

  },

  devServer: {//开启服务器配置
    port: 8088,//端口，
    host: "localhost",//ip地址:localhost本地，0.0.0.0可以访问网络地址
    progress: true,//开启进度条
    contentBase: "./static",//默认打开目录
    open: true, //自动打开浏览器,
    compress: true,//启动gzp压缩
    proxy: {
      '/api': {
        target: 'http://www.baidu.com:8080',
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '' //需要rewrite的,
        }
      }
    },
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    //配置这个模板后contentBase:"./build"不生效
    new HtmlWebpackPlugin(
      {

        template: "./public/index.html",
        filename: "index.html",
        chunks: ['index', 'vender'],
        minify: {
          //折叠换行true不换行
          collapseWhitespace: true
        },
        hash: true //生产环境下生成hash戳
      }
    ),
    new HtmlWebpackPlugin(
      {

        template: "./public/admin.html",
        filename: "admin.html",
        chunks: ['admin'],
        minify: {
          //折叠换行true不换行
          collapseWhitespace: true
        },
        hash: true //生产环境下生成hash戳
      }
    ),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
    new CopyPlugin([
      { from: 'static', to: 'static' },
    ]),
  ]
  ,
  //模块
  module: {
    //规则
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      // {
      //   test: /\.css$/,
      //   use: [
      //     'style-loader',
      //     'css-loader',
      //     {
      //       loader: MiniCssExtractPlugin.loader,
      //       publicPath: (resourcePath, context) => {
      //         // publicPath is the relative path of the resource to the context
      //         // e.g. for ./css/admin/main.css the publicPath will be ../../
      //         // while for ./css/main.css the publicPath will be ../
      //         return path.relative(path.dirname(resourcePath), context) + '/';
      //       },
      //     },
      //     {
      //       loader: 'postcss-loader',
      //       options: {
      //         plugins: [
      //           postCss
      //         ]
      //       }
      //     }
      //   ]
      // },
      {
        test: /\.(png|jpg|gif|jpeg)$/,
        use: {
          loader: "url-loader", //file-loader加载图片，url-loader图片小于多少k用base64显示
          options: {
            limit: 100 * 1024, //小于100k用base64
            //build之后的目录分类
            outputPath: 'static/images'
          },
        }
      },
      {
        test: /\.js$/,//支持require('*.js')文件
        use: {
          loader: 'babel-loader',
          options: {//用babel-loader 需要把es6-es5
            presets: [
              '@babel/preset-env'
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-transform-runtime'
            ]
          }
        },
        include: path.resolve(__dirname, 'src'),//需要转换的文件夹
        exclude: /node_modules/ //排除转换的文件夹
      },

    ]
  },
  optimization: {//优化项启动后mode模式代码压缩不再生效，必须配置js压缩插件
    minimizer: [
      new OptimizeCss(),//优化css
      new UglifyjsPlugin({
        cache: true, //是否用缓存
        parallel: true, //是否并发打包
        sourceMap: true //es6映射es5需要用
      }),
    ],

    splitChunks: {
      chunks: 'async',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true
        }
      }
    }
  }

}

